<template>
  <div class="add_manage" v-if="managelist">
    <template
      v-if="!managelist"
    >
      <div class="loading">
        <svg
          t="1616053408617"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="17643"
          width="64"
          height="64"
        >
          <path
            d="M739.487 798.497v-78.751c0-86.667-49.501-164.599-124.671-202.725 75.171-38.137 124.671-116.076 124.671-202.735v-78.747c34.78-1.811 62.499-30.658 62.499-65.863 0-36.359-29.582-65.941-65.972-65.941H287.953c-36.358 0-65.941 29.581-65.941 65.941 0 35.217 27.738 64.072 62.505 65.866v78.743c0 86.661 49.495 164.592 124.666 202.735-75.171 38.127-124.666 116.059-124.666 202.726v78.748c-34.768 1.793-62.505 30.646-62.505 65.868 0 36.368 29.582 65.95 65.941 65.95h448.061c36.39 0 65.972-29.581 65.972-65.95 0-35.21-27.719-64.054-62.499-65.865zM256.513 169.678c0-17.337 14.117-31.44 31.44-31.44h448.061c17.353 0 31.472 14.102 31.472 31.44 0 17.332-14.119 31.45-31.472 31.45H287.953c-17.322-0.001-31.44-14.118-31.44-31.45z m62.504 550.068c0-86.86 58.626-163.385 142.559-186.056a17.26 17.26 0 0 0 12.734-16.661c0-7.785-5.22-14.626-12.734-16.646-83.933-22.709-142.559-99.227-142.559-186.094v-78.655H704.98v78.655c0 86.867-58.626 163.385-142.559 186.094-7.515 2.021-12.735 8.862-12.735 16.646a17.262 17.262 0 0 0 12.735 16.661c83.933 22.673 142.559 99.196 142.559 186.056v78.659H670c-8.233-28.4-34.42-49.172-65.478-49.172h-75.286V474.897c80.982-8.637 144.278-77.368 144.278-160.603v-17.381H350.466v17.381c0 83.232 63.29 151.961 144.262 160.602v274.337H419.45c-31.053 0-57.241 20.771-65.473 49.172h-34.964v-78.659z m416.998 176.066H287.954c-17.322 0-31.44-14.117-31.44-31.455 0-17.332 14.117-31.45 31.44-31.45h448.061c17.353 0 31.472 14.119 31.472 31.45 0 17.337-14.119 31.455-31.472 31.455z"
            p-id="17644"
            fill="#1296db"
          ></path>
        </svg>
        <span class="loading_text">加载中...</span>
      </div>
    </template>
    <template v-else>
    <div class="nodata" v-if="managelist.length == 0">
      <img src="http://47.115.51.185/h5/img/noAddress.d76a1cef.png" alt="" />
    </div>
    <transition-group
      name="slide"
      tag="div"
      class="AddressList"
      v-if="managelist"
    >
      <AddressCard
        v-for="item in managelist"
        :key="item.id"
        :item="item"
        @anewGetList="getAddressList"
        @changeDefault="changeDefault"
        :elseCheckFlag="elseCheckFlag"
      ></AddressCard>
    </transition-group>
    <div class="addSite">
      <van-button icon="edit" type="danger" block to="/user/add_address"
        >添加新地址</van-button
      >
    </div>
    </template>
  </div>
</template>

<script>
import AddressCard from "@/components/AddressCard";
import { mapMutations, mapState } from "vuex";
export default {
  components: {
    AddressCard,
  },
  data() {
    return {
      managelist: null,
      elseCheckFlag: false,
    };
  },
  computed: {
    ...mapState({
      addresList: (state) => state.data.addressList,
    }),
  },
  created() {
    this.getAddressList();
  },
  methods: {
    ...mapMutations(["getAddress"]),
    getAddressList() {
      this.axios.get("/api/address/list").then((response) => {
        this.managelist = response.data.data;
        this.getAddress(this.managelist);
      });
    },
    changeDefault(e) {
      this.elseCheckFlag = e;
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm=>{
      if(to.params.flag){
      vm.$toast(to.params.msg)
    }
    });
  },
};
</script>

<style lang="less">
.add_manage {
  width: 100%;
  padding-bottom: 58px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 1;
    background: repeating-linear-gradient(
      -45deg,
      #fe9f86 0,
      #fe9f86 20%,
      transparent 0,
      transparent 25%,
      #95bef9 0,
      #95bef9 45%,
      transparent 0,
      transparent 50%
    );
    background-size: 15%;
  }
  .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loading_text {
      color: #272822;
    }
    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }

      15% {
        transform: rotateZ(180deg);
      }

      55% {
        transform: rotateZ(180deg);
      }

      70% {
        transform: rotateZ(360deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .icon {
      animation: move 4s linear 2s infinite;
    }
  }
  .nodata {
    width: 100%;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 60%;
    }
  }
  .AddressList {
    width: 100%;
  }
  .addSite {
    width: 100%;
    position: fixed;
    bottom: 8px;
    left: 0;
    padding: 0 15px;
    .van-button--block {
      border-radius: 30px;
    }
  }
  .slide-enter-active {
    animation: slide-in 0.6s ease-out;
  }
  .slide-leave-active {
    animation: slide-out 0.4s ease-out;
    /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
    position: absolute;
  }
  /* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
  .slide-move {
    transition: all 0.8s;
  }
  @keyframes slide-in {
    from {
      transform: translateY(50px);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}
</style>